<template>
  <!--分类管理->管理页面->添加页面-->
  <div class="amendsortadd">
    <div class="amendsort_tit">
      <p>添加多个</p>
    </div>
    <div class="amendsort_bot">
      <div class="amendsort_addbtn">
        <p>批量添加，一行一个</p>
      </div>
      <div class="amendsort_list">
        <ul
          class="amendsort_ul"
          ref="amendsortul"
          @click.self="amendsortulClick"
        >
          <li
            class="amendsort_li"
            v-for="(v, i) in amendsortadd"
            :key="i"
            :style="v.select ? 'background:#e7e6e6' : 'background:#fff'"
            @click.stop="amendsortlistDblclick(i)"
          >
            <input
              v-if="v.select"
              type="text"
              v-model="v.title"
              v-focus
              :ref="`inputfocus${i}`"
              @focus="inputchange(i)"
              @blur="inputblur(i)"
              @keyup.enter="amendsortaddEnter(i)"
              @keyup.down="amendsortaddkeyup(i, 'down')"
              @keyup.up="amendsortaddkeyup(i, 'up')"
            />
            <p v-else>{{ v.title }}</p>
          </li>
        </ul>
      </div>
      <div class="amendsort_tool">
        <div class="amendsort_tools">
          <div class="amendsort_confirm" @click="amendsortaddOkClick">确定</div>
          <div class="amendsort_cancel" @click="amendsortaddcancelClick">
            取消
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
import { amendsortKeyupSet } from "@/utils";
export default {
  mixins: [mixin],
  /**
   * @name 模板管理->分类管理->管理页面->添加更多
   */
  data() {
    return {
      amendsortadd: [],
      fields: "",
    };
  },
  methods: {
    //点击空白地方
    amendsortulClick() {
      this.amendsortadd.forEach((v) => {
        v.select = false;
      });
    },
    //输入事件     //失去焦点，若为空，之前有内容回到编辑前的状态，若没有内容删掉
    inputblur(i) {
      if (this.amendsortadd[i].title == "") {
        if (this.fields) {
          this.amendsortadd.forEach((v, index) => {
            if (i == index) v.title = this.fields;
          });
        } else this.amendsortadd.splice(i, 1); 
      }
    },
    inputchange(i) {
      this.fields = JSON.parse(JSON.stringify(this.amendsortadd[i].title));
    },

    //列表点击
    amendsortlistDblclick(i) {
      this.amendsortadd.forEach((v) => {
        v.select = false;
      });
      this.amendsortadd[i].select = true;
      this.$nextTick(() => {
        this.$refs[`inputfocus${i}`][0].focus();
      });
    },

    // 点击确定 & 点击取消
    amendsortaddOkClick() {
      this.$emit("childOkClick", this.amendsortadd);
      this.$emit("childcancelClick", false);
    },
    amendsortaddcancelClick() {
      this.$emit("childcancelClick", false);
    },

    //键盘事件
    amendsortaddkeyup(i, type) {
      let index;
      if (type == "down") {
        index = i + 1;
        amendsortKeyupSet(index, this.amendsortadd, this);
      } else if (type == "up") {
        index = i - 1;
        amendsortKeyupSet(index, this.amendsortadd, this);
      }
    },
    amendsortaddEnter(i) {
      let obj = {
        title: "",
        select: true,
        dataId: "",
      };
      this.amendsortadd.forEach((v) => {
        v.select = false;
      });
      let index = i + 1;
      this.amendsortadd.splice(index, 0, obj);
      this.$nextTick(() => {
        this.$refs[`inputfocus${index}`][0].focus();
      });
    },
  },
  created() {
    let obj = {
      title: "请编辑",
      select: true,
      dataId: "",
    };
    this.amendsortadd.push(obj);
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";

.amendsortadd {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 276px;
  background: #f6f6f6;
  border-radius: @radius2;
  box-shadow: @shadow;
  z-index: 1000;
  overflow: hidden;
  .amendsort_tit {
    .divDA();
    height: 36px;
    padding: 0 14px;
    background: #fff;
    font-weight: bold;
    font-size: 12px;
  }
  .amendsort_bot {
    padding: 0 14px 12px 14px;
    .amendsort_addbtn {
      line-height: 32px;
    }
  }
  .amendsort_list {
    height: 148px;
    border: 1px solid #bdbdbd;
    border-radius: @radius2;
    background: #fff;
    padding: 12px;
    .amendsort_ul {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      .amendsort_li {
        cursor: pointer;
        width: 110px;
        height: 32px;
        border-radius: 4px;
        padding: 0 12px;
        .divDA();
        input {
          overflow: hidden;
        }
      }
    }
  }
  .amendsort_tool {
    width: 100%;
    height: 34px;
    margin-top: 12px;
    .cen();
    .amendsort_tools {
      display: flex;
      .amendsort_confirm {
        .btn();
        .cen();
        margin-right: 14px;
        background: @color2;
        color: #fff;
      }
      .amendsort_cancel {
        .btn();
        .cen();
      }
    }
  }
}
</style>